<template>
	<view>
		<view class="square" id="circle">
			<canvas class="item " :canvas-id="`${canvasId}bg`"></canvas>
			<canvas class="item" :canvas-id="canvasId"></canvas>
			<view class="item flex ct ">
				<view class="text-center">
					<view class="fz20 bold">{{ percentText }}</view>
					<view class="fz12 gray">{{title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props:{
		percent:{
			type: [Number,String],
			default : 90
		},
		percentText:{
			default : "90"
		},
		title : {
			default : "百分比"
		},
		lineWidth : {
			default : 2
		},
		startColor : {
			default : "#FFA68C"
		},
		endColor : {
			default : "#FF3B1D"
		},
		canvasId : {
			default : "circleCanvas"
		}
	},
	data() {
		return {
			width : 0 ,
			ctx : null 
		};
	},
	mounted : function() {
		this.computeHeight()
	},
	methods: {
		
		computeHeight:function(e){
			var timer = setInterval(e => {
				const query = uni.createSelectorQuery().in(this);
				query.select('#circle').boundingClientRect(data => {
					var width = data.width ;
					if (width > 0) {
						this.width = width ;
						clearInterval(timer);
						this.drawProgressbg();
						this.drawCicleAniamtion();
					}
				}).exec();
			},50);
		},
		
		drawProgressbg: function() {
			// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
			var ctx = uni.createCanvasContext( this.canvasId + 'bg', this);
			ctx.setLineWidth(this.lineWidth); // 设置圆环的宽度
			ctx.setStrokeStyle('#E9E9E9'); // 设置圆环的颜色
			ctx.setLineCap('round'); // 设置圆环端点的形状
			ctx.beginPath(); //开始一个新的路径
			var centerX = this.width/2 ;
			var r = (this.width-20)/2 ;
			ctx.arc( centerX, centerX, r, 0.75 * Math.PI, 0.25 * Math.PI, false);
			//设置一个原点(110,110)，半径为100的圆的路径到当前路径
			ctx.stroke(); //对当前路径进行描边
			ctx.draw();
		},
		drawCircle: function(step) {
			if (this.ctx == null ) {
				this.ctx = uni.createCanvasContext( this.canvasId , this);
			}else{
				this.ctx.clearRect(0,0,this.width,this.width);
			}
			// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
			var gradient = this.ctx.createLinearGradient(28, 55, 192, 55);
			gradient.addColorStop('0', this.startColor);
			gradient.addColorStop('1.0', this.endColor );
			this.ctx.setLineWidth(this.lineWidth);
			this.ctx.setStrokeStyle(gradient);
			this.ctx.setLineCap('round');
			this.ctx.beginPath();
			// 参数step 为绘制的百分比
			step = 0.015 * step + 0.75;
			if (step >= 2) {
				step = step % 2;
			}
			var centerX = this.width/2 ;
			var r = (this.width-20)/2 ;
			this.ctx.arc(centerX, centerX, r, 0.75 * Math.PI, step * Math.PI, false);
			this.ctx.stroke();
			this.ctx.draw();
		},
		
		drawCicleAniamtion:function(e){
			var count = 1 ;
			var drawTimer = setInterval(e => {
				var value = this.percent*count/100 ;
				count ++ ;
				if (count > 100) {
					clearInterval(drawTimer);
					return ;
				}
				this.drawCircle(value);
			},20);
			
		},
	}
};
</script>

